<script setup lang="ts">
import * as Typeing from '@/stores/types/index'
import {
  ref,
  toRef,
  reactive,
  onMounted,
  onUnmounted,
  watch,
  onBeforeUpdate,
  nextTick,
  type PropType
} from 'vue'
import useLoadMore from '@/utils/useLoadMore'
import useLongTouch from '@/utils/useLongTouch'
import useTestError from '@/hooks/useTestError'
useTestError()

const props = defineProps({
  notes: Array as PropType<Typeing.Note[]>
})
// 存储列表的元素
const items = ref<null | HTMLElement[]>([])
// 获取多个dom元素的用法 ref
const refListBox = ref<null | HTMLElement>(null)
const emit = defineEmits(['loadMore', 'toAddNote', 'longTouch'])
useLoadMore(refListBox, emit) // 处理触底加载

const noteListSate: Typeing.noteListSate = {
  leftList: [],
  rightList: []
}
const notes = toRef(props, 'notes')
const state = reactive(noteListSate)

// 初始化瀑布流列表
const initList = () => {
  let leftHightSum = 0
  let rightHeightSum = 0
  let leftArr: any[] = []
  let rightArr: any[] = []
  nextTick(() => {
    items.value!.forEach((item, index) => {
      if (leftHightSum <= rightHeightSum) {
        leftArr.push(props.notes![index])
        leftHightSum += item.clientHeight
      } else {
        rightArr.push(props.notes![index])
        rightHeightSum += item.clientHeight
      }
      state.leftList = leftArr.reverse()
      state.rightList = rightArr.reverse()
    })
  })
}
const clickItem = (e: any) => {
  if (e.target.className === 'click-model') {
    emit('toAddNote', e.target.id)
  }
}
const leftDom = ref<null | HTMLElement>(null)
const rightDom = ref<null | HTMLElement>(null)
useLongTouch([leftDom, rightDom], (id: string) => {
  emit('longTouch', id)
})
onMounted(() => {
  initList()
})
onUnmounted(() => {
  items.value = []
})
onBeforeUpdate(() => {
  items.value = []
})
watch(props!, () => {
  // 参数改变后重新渲染 ????
  console.log('*** 监听到props变化 ***')
  // notes.value = props.notes!
  initList()
})
</script>

<template>
  <div class="list-box" ref="refListBox">
    <div class="list-left" ref="leftDom" @click="clickItem">
      <div class="list-item" v-for="item in state.leftList" :key="item._id">
        <div class="item-content">
          <p class="item-text">{{ item.content }}</p>
        </div>
        <div class="item-bottom">
          <p>{{ item.dates }}</p>
        </div>
        <div class="click-model" :id="item['_id']"></div>
      </div>
    </div>
    <div class="list-right" ref="rightDom" @click="clickItem">
      <div class="list-item" v-for="item in state.rightList" :key="item._id">
        <div class="item-content">
          <p class="item-text">{{ item.content }}</p>
        </div>
        <div class="item-bottom">
          <p>{{ item.dates }}</p>
        </div>
        <div class="click-model" :id="item['_id']"></div>
      </div>
    </div>
    <div class="init-list">
      <div
        v-for="item in notes"
        :key="item['_id']"
        class="list-item"
        :ref="(el)=>{if(el!= null) items?.push(el as HTMLElement)}"
      >
        <div class="item-content">
          <p class="item-text">{{ item.content }}</p>
        </div>
        <div class="item-bottom">
          <p>{{ item.dates }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.list-box {
  width: 100%;
  height: 100%;
  overflow: auto;
  &::-webkit-scrollbar {
    /* 滚动条宽 */
    display: none;
  }
  &::-webkit-scrollbar-thumb {
    /* 滚动条 拖动条 */
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
  }
  &::-webkit-scrollbar-track {
    /* 滚动条背景槽 */
    background-color: #eee;
    border-radius: 6px;
  }
  .list-left {
    width: 50%;
    float: left;
    padding-bottom: 50px;
    padding-left: 5px;
  }
  .list-right {
    width: 50%;
    float: left;
    display: flex;
    flex-flow: column wrap;
    align-items: flex-end;
    padding-bottom: 50px;
    padding-right: 5px;
  }
  .init-list {
    width: 50%;
    background-color: rgb(122, 129, 127);
    position: absolute;
    visibility: hidden;
    height: 2rem;
    overflow: hidden;
  }
  .list-item {
    box-sizing: border-box;
    width: 95%;
    max-height: 2rem;
    background-color: rgb(245, 245, 245);
    border-radius: 0.15rem;
    margin-top: 0.1rem;
    padding: 0.2rem;
    position: relative;
    box-shadow: 2px 2px 9px #ccc;
    .item-content {
      max-height: 1.25rem;
      font-size: 0.16rem;
      line-height: 0.25rem;
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 5;
      color: rgb(99, 99, 99);
      .item-text:first-line {
        color: rgb(27, 27, 27);
        font-weight: 600;
      }
    }
    .item-bottom {
      height: 0.35rem;
      color: rgb(151, 151, 151);
      display: flex;
      align-items: flex-end;
    }
    .click-model {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
  }
}
</style>
